<template>
  <div class="dashboard">
    <h1 class="page-title">仪表板</h1>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon users">
              <el-icon size="40"><User /></el-icon>
            </div>
            <div class="stat-info">
              <p class="stat-label">总用户数</p>
              <h2 class="stat-value">{{ dashboard.overview?.total_users || 0 }}</h2>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon clubs">
              <el-icon size="40"><UserFilled /></el-icon>
            </div>
            <div class="stat-info">
              <p class="stat-label">俱乐部数</p>
              <h2 class="stat-value">{{ dashboard.overview?.total_clubs || 0 }}</h2>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon events">
              <el-icon size="40"><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <p class="stat-label">总活动数</p>
              <h2 class="stat-value">{{ dashboard.overview?.total_events || 0 }}</h2>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon active">
              <el-icon size="40"><TrendCharts /></el-icon>
            </div>
            <div class="stat-info">
              <p class="stat-label">进行中活动</p>
              <h2 class="stat-value">{{ dashboard.overview?.active_events || 0 }}</h2>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 今日数据 -->
    <el-row :gutter="20" class="today-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>今日新增</span>
          </template>
          <div class="today-stats">
            <div class="today-item">
              <el-icon><User /></el-icon>
              <span>新增用户: {{ dashboard.today?.new_users || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <span>待审核</span>
          </template>
          <div class="pending-stats">
            <div class="pending-item">
              <span>俱乐部: {{ dashboard.pending?.clubs || 0 }}</span>
            </div>
            <div class="pending-item">
              <span>活动: {{ dashboard.pending?.events || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-card class="quick-actions">
      <template #header>
        <span>快捷操作</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-button type="primary" @click="$router.push('/users')">
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="success" @click="$router.push('/events')">
            <el-icon><Calendar /></el-icon>
            <span>活动管理</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="warning" @click="$router.push('/clubs')">
            <el-icon><UserFilled /></el-icon>
            <span>俱乐部管理</span>
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="info" @click="$router.push('/statistics')">
            <el-icon><TrendCharts /></el-icon>
            <span>数据统计</span>
          </el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { adminApi } from '@/api/admin'

const dashboard = ref({})

onMounted(() => {
  loadDashboard()
})

const loadDashboard = async () => {
  try {
    dashboard.value = await adminApi.getDashboard()
  } catch (error) {
    console.error('加载仪表板数据失败:', error)
  }
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.page-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #303133;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 8px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-icon.users {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.clubs {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-icon.events {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-icon.active {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.today-row {
  margin-bottom: 20px;
}

.today-stats,
.pending-stats {
  display: flex;
  gap: 20px;
}

.today-item,
.pending-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
}

.quick-actions .el-button {
  width: 100%;
  height: 60px;
  font-size: 16px;
}
</style>

